extends mixins/_layout
include mixins/ms_normal
include mixins/ms_flash
include mixins/ms_access

block content
  link(rel="stylesheet", href="/act/activity.css")
  link(rel="stylesheet", href="/css/colorpicker.css")
  body
  
    #wrapper
      .activity_id 活动 id: 
        input#cssid(type="text", placeholder="* 必填", value="110")
        button#act_preview.preview 预览
      #modules
        ul.ms
          each item,index in ms_arr
            if item == 0
              li(idx=index/2, ms_name='normal', class=index==0?'on':'')
                p.ms_desc 普通模块
            else if item == 1
              li(idx=index/2, ms_name='flash', class=index==0?'on':'')
                p.ms_desc 抢购模块
            else if item == 2
              li(idx=index/2, ms_name='acces', class=index==0?'on':'')
                p.ms_desc 搭配模块
            else if item == 3
              li(idx=index/2, ms_name='normal', class=index==0?'on':'')
                p.ms_desc 促销码模块

          li#ms_add
            button.ms_show 添加模块
            .ms_select.hide
              ul.ms_select_ul
                li.option(value=0)
                  i.checkbox
                  | 普通模块
                li.option(value=1)
                  i.checkbox
                  | 抢购模块
                li.option(value=2)
                  i.checkbox
                  | 搭配模块
                li.option(value=3)
                  i.checkbox
                  | 促销码模块
              button.ms_save 保存所选
              button.ms_drop 放弃所选
      
      #desk
        ul.ms_contain
          each item,index in ms_arr
            if item == 0
              +ms_normal(index)
            else if item == 1
              +ms_flash(index)
            else if item == 2
              +ms_access(index)
          
      include mixins/_footer
      +footer
      input#ms_arr(type="hidden", value=ms_arr)

    script(src="/js/jQuery.v3.2.1" +config.min + ".js")
    script(src="/js/colorpicker" +config.min + ".js")
    script(src="/js/base" +config.min + ".js")
    script(src="/js/codemirror" +config.min + ".js")
    script.
      var log = console.log, allConfig = [], cssid = $('#cssid').val();
      (function(){
        // 预备好需要使用到的存储对象
        var i=0, length=document.getElementById('ms_arr').value.split('_').length;
        for(;i<length;i++){
          allConfig.push({'cssid':cssid});
        }
      })();
      $(function(){
        var act_preview=$('#act_preview'), tab_group = $('.tab_group'), ms_edit = $('.ms_edit'), ms_arr = $('#ms_arr').val().split('_');

        // 预览整页
        act_preview.on('click', function(){
          var cssid = $('#cssid').val();
          return window.open('/preview?id='+cssid);
        });
        
        var modules = {
          ms_tab:function(){
            var desk = $('#desk'), ms_edit = desk.find('.ms_edit');
            // 切换编辑模块
            $('#modules').on('click', '[idx]', function(){
              var _this = $(this), index = _this.attr('idx');
              _this.addClass('on').siblings('li').removeClass('on');
              $(ms_edit[index]).addClass('on').siblings('li').removeClass('on');
            });
          },
          tab_group:function(){
            var tab_group = $('.tab_group');
            // 模块设置编辑区
            tab_group.each(function(){
              var _this = $(this), tab_nav = _this.find('.tab_nav'), tab_n = tab_nav.find('.tab_n'), panel = _this.find('.tab_panel'), panes = panel.find('.pane');
              tab_nav.on('click', '.tab_n', function(){
                var $this = $(this), index = $this.attr('idx');
                tab_n.removeClass('on').eq(index).addClass('on');
                panes.removeClass('on').eq(index).addClass('on');
              });
            });
          },
          ms_add:function(){
            // 新增模块
            var ms_add = $('#ms_add'),
              ms_select = ms_add.find('.ms_select'),
              ms_select_ul = ms_add.find('.ms_select_ul'),
              buttons = ms_select.find('button');

            ms_add.on('mouseenter', function(){
              ms_select.show();
            });

            ms_select_ul.on('click', '.option', function(){
              var _this = $(this);
              _this.toggleClass('on');
            });

            // 添加/放弃添加模块
            buttons.on('click', function(){
              var _this = $(this);
              if(_this.hasClass('ms_save')){
                console.log('已保存.');
                var selected = ms_select_ul.find('.on');
                for(var i=0, length=selected.length; i<length; i++){
                  ms_arr.push(selected[i].getAttribute('value'));
                }
                // 重新刷新页面
                window.location.href='/ui?msid='+ms_arr.join('_');
              }else{
                ms_select.hide();
                ms_select_ul.find('.option').removeClass('on');
              }
            });
          }
        }
        
        modules.ms_tab();
        modules.tab_group();
        modules.ms_add();
        
        // 所有版块本店售价设置:
        $('[name=shopPrice]').on('click', function(){
          var _this = $(this), showShopPrice=1, idx=_this.closest('.ms_edit').attr('idx'), shopPrice = $(ms_edit[idx]).find('.old_price');
          if(_this.attr('type')==0){
            showShopPrice=0;
            shopPrice.hide();
          }else{
            shopPrice.show();
          }
          allConfig[idx].shopPrice=showShopPrice;
        });

        // 所有版块折扣角标设置:
        $('[name=cutOffTag]').on('click', function(){
          var _this = $(this), showcutOffTag=1, idx=_this.closest('.ms_edit').attr('idx'), cutOffTag = $(ms_edit[idx]).find('.cutOffTag');
          if(_this.attr('type')==0){
            showcutOffTag=0;
            cutOffTag.hide();
          }else{
            cutOffTag.show();
          }
          allConfig[idx].cutOffTag=showcutOffTag;
        });

      });
    script.
      $(function(){
        // 普通模块所有设置项
        var ms_normal = $('.ms_normal');

        // 普通版块折扣标背景色
        $('.normal_discount_color').each(function(i,item){
          var normal_list=$(ms_normal[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            normal_list.find('.cutOffTag').css('background',e.color.toString('rgba'));
          });
        });

        // 普通版块加入购物车图标颜色
        $('.normal_tocart_color').each(function(i,item){
          var normal_list=$(ms_normal[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            normal_list.find('.toCart').css('color',e.color.toString('rgba'));
          });
        });

        // 普通版块背景色
        $('.normal_bg').each(function(i,item){
          var normal_list=$(ms_normal[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            normal_list[0].style.backgroundColor = e.color.toString('rgba');
          });
        })
        

        // buy now 按钮背景色
        $('.normal_buy_bg').each(function(i,item){
          var normal_list=$(ms_normal[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            //format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            normal_list.find('.goodsbuy').not('.dealend')[0].style.backgroundColor = e.color.toString('rgba');
          });
        })
        
        // buy now 按钮字体颜色
        $('.normal_buy_color').each(function(i,item){
          var normal_list=$(ms_normal[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            normal_list.find('.goodsbuy').not('.dealend')[0].style.color = e.color.toString('rgba');
          });
        });

        // 保存普通版块
        $('.normal_saveBtn').each(function(i, item){
          $(item).on('click', function(){
            var ms_edit = $(this).closest('.ms_edit'), idx = ms_edit.attr('idx'),
              normal_discount_color = ms_edit.find('.normal_discount_color_val').val(),
              normal_tocart_color = ms_edit.find('.normal_tocart_color_val').val(),
              normal_bg = ms_edit.find('.normal_bg_val').val(),
              normal_buy_bg = ms_edit.find('.normal_buy_bg_val').val(),
              normal_buy_color = ms_edit.find('.normal_buy_color_val').val();
            allConfig[idx].cssid = $('#cssid').val();
            allConfig[idx].acttype = "ms_normal";
            allConfig[idx].normal_bg = normal_bg;
            allConfig[idx].normal_buy_bg = normal_buy_bg;
            allConfig[idx].normal_buy_color = normal_buy_color;
            allConfig[idx].css = 
              '.goodslist_'+idx+'{'
                +'background:' + normal_bg + ';'
              +'}'
              +'.goodslist_'+idx+' .cutOffTag{'
                +'background:' + normal_discount_color + ';'
              +'}'
              +'.goodslist_'+idx+' .toCart{'
                +'color:'+ normal_tocart_color +';'
              +'}'
              +'.goodslist_'+idx+' .goodsbuy{'
                +'color:'+ normal_buy_color +';'
                +'background:'+ normal_buy_bg +';'
              +'}';
            
            $.ajax({
              type:'POST',
              url:'/save_ms_normal',
              data:{
                index: idx,
                allConfig: allConfig,
                cssid: $('#cssid').val()
              },
              success:function(){
                log('save success!');
              }
            });
          });
        });
      })
    script.
      $(function(){
        // 所有抢购模块设置项
        var ms_flash = $('.ms_flash');

        // 抢购版块折扣标背景色
        $('.flash_discount_color').each(function(i,item){
          var flash_list=$(ms_flash[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            flash_list.find('.cutOffTag').css('background',e.color.toString('rgba'));
          });
        });

        // 抢购版块加入购物车图标颜色
        $('.flash_tocart_color').each(function(i,item){
          var flash_list=$(ms_flash[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            flash_list.find('.toCart').css('color',e.color.toString('rgba'));
          });
        });

        // 抢购版块背景色
        $('.flash_bg').each(function(i,item){
          var flash_list=$(ms_flash[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            flash_list[0].style.backgroundColor = e.color.toString('rgba');
          });
        })
        

        // buy now 按钮背景色
        $('.flash_buy_bg').each(function(i,item){
          var flash_list=$(ms_flash[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            //format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            flash_list.find('.goodsbuy').not('.dealend')[0].style.backgroundColor = e.color.toString('rgba');
          });
        })
        
        // buy now 按钮字体颜色
        $('.flash_buy_color').each(function(i,item){
          var flash_list=$(ms_flash[i]).find('.goodslist');
          $(item).colorpicker({
            customClass: 'colorpicker-2x',
            format:'hex',
            sliders: {
              saturation: {maxLeft: 200, maxTop: 200},
              alpha: {maxTop: 200},
              hue: {maxTop: 200}
            },
            colorSelectors: {
              'black': '#000000',
              'white': '#ffffff',
              'red': '#FF0000',
              'default': '#777777',
              'primary': '#337ab7',
              'success': '#5cb85c',
              'info': '#5bc0de',
              'warning': '#f0ad4e',
              'danger': '#d9534f'
            }
          }).on('changeColor', function(e) {
            flash_list.find('.goodsbuy').not('.dealend')[0].style.color = e.color.toString('rgba');
          });
        });

        // 保存抢购版块
        $('.flash_saveBtn').each(function(i, item){
          $(item).on('click', function(){
            var ms_edit = $(this).closest('.ms_edit'), idx = ms_edit.attr('idx'),
              flash_discount_color = ms_edit.find('.flash_discount_color_val').val(),
              flash_tocart_color = ms_edit.find('.flash_tocart_color_val').val(),
              flash_bg = ms_edit.find('.flash_bg_val').val(),
              flash_buy_bg = ms_edit.find('.flash_buy_bg_val').val(),
              flash_buy_color = ms_edit.find('.flash_buy_color_val').val();
            allConfig[idx].cssid = $('#cssid').val();
            allConfig[idx].acttype = "ms_flash";
            allConfig[idx].flash_bg = flash_bg;
            allConfig[idx].flash_buy_bg = flash_buy_bg;
            allConfig[idx].flash_buy_color = flash_buy_color;
            allConfig[idx].css = 
              '.goodslist_'+idx+'{'
                +'background:' + flash_bg + ';'
              +'}'
              +'.goodslist_'+idx+' .cutOffTag{'
                +'background:' + flash_discount_color + ';'
              +'}'
              +'.goodslist_'+idx+' .toCart{'
                +'color:'+ flash_tocart_color +';'
              +'}'
              +'.goodslist_'+idx+' .goodsbuy{'
                +'color:'+ flash_buy_color +';'
                +'background:'+ flash_buy_bg +';'
              +'}';

            $.ajax({
              type:'POST',
              url:'/save_ms_flash',
              data:{
                index: idx,
                allConfig: allConfig,
                cssid: $('#cssid').val()
              },
              dataType:'json',
              success:function(){
                log('save success!');
              }
            });
          });
        });
      })
    script.
      $(function(){
        // 所有搭配模块设置项

      })
    script.
      $(function(){
        // 所有促销码模块设置项

      })